<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .main {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      width: 380px;
      height: 380px;
      margin: 80px auto;
      border: 1px solid #F0F0F0;
      border-radius: 20px;
      background-color: #F0F0F0;
    }

    .input1 {
      width: 300px;
      padding-left: 10px;
      margin-top: 30px;
      height: 50px;
      border: none;
      border-radius: 10px;
      color: #fff;
      background-color: rgb(0, 0, 0);
      font-size: large;
    }

    textarea {
      width: 300px;
      padding: 10px;
      height: 150px;
      border: none;
      border-radius: 10px;
      background-color: rgb(255, 255, 255);
      font-size: large;
      resize: none;
    }

    .main>div {
      width: 300px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

    button {
      width: 100px;
      height: 40px;
      box-shadow: 3px 10px 15px 0 rgba(0, 0, 0, 0.24);
      background-color: #fff;
      border: none;
      border-radius: 5px;
    }

    button:hover {
      opacity: 0.7;
      background-color: rgb(220, 220, 220);
    }
  </style>
</head>

<body>
  <div class="main">
    <input type="text" placeholder="明文" class="input1">
    <textarea name="" id="textarea" placeholder="密文" cols="30" rows="10"></textarea>

    <div>
      <button id="code">加密</button>
      <button id="decode">解密</button>
    </div>
  </div>

  <script>

    let kb = [
      { "A": "Q" }, { "B": "W" }, { "C": "E" }, { "D": "R" }, { "E": "T" }, { "F": "Y" }, { "G": "U" }, { "H": "I" }, { "I": "O" }, { "J": "P" }, { "K": "A" }, { "L": "S" }, { "M": "D" }, { "N": "F" }, { "O": "G" }, { "P": "H" }, { "Q": "J" }, { "R": "K" }, { "S": "L" }, { "T": "Z" }, { "U": "X" }, { "V": "C" }, { "W": "V" }, { "X": "B" }, { "Y": "N" }, { "Z": "M" },
    ]
    let nine = [
      { "A": "21" }, { "B": "22" }, { "C": "23" }, { "D": "31" }, { "E": "32" }, { "F": "33" }, { "G": "41" }, { "H": "42" }, { "I": "43" }, { "J": "51" }, { "K": "52" }, { "L": "53" }, { "M": "61" }, { "N": "62" }, { "O": "63" }, { "P": "71" }, { "Q": "72" }, { "R": "73" }, { "S": "74" }, { "T": "81" }, { "U": "82" }, { "V": "83" }, { "W": "91" }, { "X": "92" }, { "Y": "93" }, { "Z": "94" },
    ]
    let morse = [{ "1": ".- - - -" }, { "2": "..- - -" }, { "3": "...- -" }, { "4": "....-" }, { "5": "....." }, { "6": "- ...." }, { "7": "- - ..." }, { "8": "- - - .." }, { "9": "- - - - ." }, { "0": "- - - - -" }
    ]


    // 封装加密
    function getCode(str) {
      // 栅格加密
      // I L O V E Y O U T O O
      // O T O E O I O U Y V L
      let arr = str.toUpperCase().split('').reverse()
      console.log(arr)
      for (let i = 0; i < 1; i++) {
        var word = ''
        for (let i = 0; i < arr.length; i += 2) {
          word += arr[i]
        }
        for (let i = 1; i < arr.length; i += 2) {
          word += arr[i]
        }
      }
      console.log(word)

      // 字母表转换电脑键盘
      // G Z G T G O G X N C S 
      let re = ''
      // 遍历word字符串，找到kb中对应的值  存入re
      for (let i = 0; i < word.length; i++) {
        let char = word[i]
        let replace = kb.find(obj => obj[char])
        if (replace) {
          re += Object.values(replace)[0]
        }
      }
      console.log(re)

      // 转换九宫格
      // 41 94 41 81 41 63 41 92 62 23 74
      let re1 = ''
      // 遍历re字符串，找到nine中对应的值  存入re1
      for (let i = 0; i < re.length; i++) {
        let char = re[i]
        let replace = nine.find(obj => obj[char])
        if (replace) {
          re1 += Object.values(replace)[0]
        }
      }
      console.log(re1)

      // 摩尔斯电码加密
      // ....-/.----/----./....-/....-/.----/---../.----/....-/.----/-..../...--/....-/.----/----./..---/-..../..---/..---/...--/--.../....-/ 
      let result = ''
      // 遍历re1字符串，找到morse中对应的值 得到加密最终结果
      for (let i = 0; i < re1.length; i++) {
        let char = re1[i]
        let replace = morse.find(obj => obj[char])
        if (replace) {
          result += Object.values(replace)[0] + '/'
        }
      }
      console.log(result)

      return result
    }


    // 封装解密
    function getDecode(str) {
      // 摩斯电码解密 4194418141634192622374
      let arr = str.split('/')
      let re1 = ''
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < morse.length; j++) {
          if (arr[i] === Object.values(morse[j])[0]) { // 枚举morse中右边的值
            re1 += Object.keys(morse[j])[0] // 枚举morse中左边的值
            break
          }
        }
      }
      console.log(re1)


      // 九宫格 GZGTGOGXNCS
      // let re1 = '4194418141634192622374'
      let arr2 = []
      for (let i = 0; i < re1.length; i += 2) {
        arr2.push(re1.slice(i, i + 2))
      }
      console.log(arr2)
      let re2 = ''
      for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < nine.length; j++) {
          if (arr2[i] === Object.values(nine[j])[0]) { // 枚举morse中右边的值
            re2 += Object.keys(nine[j])[0] // 枚举morse中左边的值
            break
          }
        }
      }
      console.log(re2)

      // 键盘 OTOEOIOUYVL
      let re3 = ''
      let arr3 = re2.split('')
      for (let i = 0; i < arr3.length; i++) {
        for (let j = 0; j < kb.length; j++) {
          if (arr3[i] === Object.values(kb[j])[0]) { // 枚举morse中右边的值
            re3 += Object.keys(kb[j])[0] // 枚举morse中左边的值
            break
          }
        }
      }
      console.log(re3)

      // 栅格解密
      let n = ''
      let arr4 = re3.split('')
      console.log(arr4)
      for (let i = 0; i < arr4.length / 2; i++) {
        if (arr4.length % 2 == 0) {
          n += arr4[i] + arr4[arr4.length / 2 + i]
          // console.log(n)
        } else {
          n += arr4[i] + arr4[(arr4.length + 1) / 2 + i]
          // console.log(n)
        }
      }
      let index = n.lastIndexOf("undefined");
      if (index !== -1) {
        n = n.slice(0, index)
      }
      let result = n.split('').reverse().join('')
      return result

      // console.log(result)
    }


    // 获取页面内容
    const input = document.querySelector('.input1')
    const textarea = document.querySelector('textarea')
    const bt1 = document.querySelector('#code')
    const bt2 = document.querySelector('#decode')
    // 调用函数加密
    bt1.addEventListener('click', () => {
      textarea.value = getCode(input.value)
      input.value = ''
    })
    // 调用函数解密
    bt2.addEventListener('click', () => {
      input.value = getDecode(textarea.value)
      textarea.value = ''
    })





  </script>
</body>

</html>